<template>
  <div class="app-page">
    <el-table-form ref="form">
      <el-form-item label="单量统计申请时间：" :table-form-merge="2">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          :default-time="['00:00:00', '23:59:59']"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="申请人:">
        <el-input v-model.trim="query.applyUser" placeholder="请输入" clearable />
      </el-form-item>
      <template v-slot:btns>
        <el-button
          v-permission="[50305,1]"
          :loading="$loadingPlugin.fetchData"
          type="primary"
          @click="search"
        >查询</el-button>
        <el-popover
          class="config-tip"
          placement="bottom"
          width="550"
          trigger="hover"
        >
          <div class="attention">注意：</div>
          <div>（1）由于数据量大，每次提交的申请要等到晚上才能执行，而且统计是定时任务执行时的电子围栏，
            因此一天只会统计一个企业最新的一条申请，数据第二天才能生成，同一天老的申请会被覆盖掉。</div>
          <div>（2）统计日期一次最多只能统计3个月。</div>
          <div>（3）由于围栏之间会存在间隙，重叠等方面的原因，统计的数据有一定的误差，只能做到基本准确。</div>
          <div>（4）定时任务每天凌晨3点执行统计前一天的申请，当天的单量统计申请超过24点之后不能进行申请。</div>
          <div>（5）订单量统计统计日期为此段时间内已完成签收的订单量。</div>
          <i slot="reference" class="el-icon-question radio-icon" />
        </el-popover>
      </template>
    </el-table-form>
    <div class="btns">
      <el-button
        v-permission="[50305,2]"
        type="primary"
        @click="getfenceApply"
      >申请单量统计</el-button>
    </div>
    <lb-table
      ref="lbTable"
      v-loading="$loadingPlugin.fetchData"
      v-el-height-adaptive-table="{ bottomOffset: 10 }"
      border
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      :immediate-fetch="false"
      @fetch="fetchData"
    />
    <fenceDetail ref="fenceDetail" />
    <fenceApply ref="fenceApply" />
  </div>
</template>

<script>
  import dayjs from 'dayjs'
  import { parseTime } from '@/utils'
  import fenceDetail from './fenceDetail'
  import { fenceReserveApplyList, fenceReserveDelete } from '@/api'
  import fenceApply from './fenceApply'

  export default {
    name: 'fencePre',
    components: {
      fenceDetail,
      fenceApply
    },
    data() {
      return {
        date: [dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '00:00:00',
               dayjs(new Date()).format('YYYY-MM-DD') + ' ' + '23:59:59'],
        query: {
          applyUser: ''
        },
        tableData: {
          data: [],
          column: [
            {
              type: 'index',
              fixed: 'left'
            },
            {
              prop: 'applyTime',
              label: '单量统计申请时间',
              minWidth: 200,
              render: (h, { row }) => {
                return (
                <span>
                  {(row.applyTime) && (parseTime(row.applyTime, '{y}-{m}-{d} {h}:{i}:{s}'))}
                </span>
              )
              }
            },
            {
              prop: 'applyUser',
              label: '申请人'
            },
            {
              prop: '',
              label: '统计日期',
              minWidth: 200,
              render: (h, { row }) => {
                return (
                <div>
                  {(row.statStartTime && row.statEndTime) && <span>{parseTime(row.statStartTime, '{y}-{m}-{d}') + ' ~ ' + parseTime(row.statEndTime, '{y}-{m}-{d}')}</span>}
                </div>
              )
              }
            },
            {
              prop: 'generateTime',
              label: '数据生成时间',
              minWidth: 200,
              render: (h, { row }) => {
                return (
                <span>
                  {(row.generateTime) && (parseTime(row.generateTime, '{y}-{m}-{d} {h}:{i}:{s}'))}
                </span>
              )
              }
            },
            {
              label: '操作',
              align: 'center',
              className: 'action-col',
              fixed: 'right',
              width: 110,
              render: (h, { row, $index }) => {
                return (
                <div>
                  {(row.fenceStatus === 2) && (
                    <el-link
                    v-permission={[50305, 3]}
                      underline={false}
                      size='mini'
                      onClick={() => this.showDetail(row, $index)}
                    >
                      单量详情
                    </el-link>
                  )}
                  {(row.fenceStatus === 1) && (
                    <el-link
                    v-permission={[50305, 4]}
                      underline={false}
                      size='mini'
                      type='danger'
                      onClick={() => this.del(row, $index)}
                    >
                      删除
                    </el-link>
                  )}
                </div>
              )
              }
            }
          ],
          total: 0
        }
      }
    },

    methods: {
      search() {
        this.updateData()
      },
      async getfenceApply() {
        await this.$refs.fenceApply.open(1)
        this.updateData()
      },
      updateData() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async fetchData({ currentPage, pageSize }) {
        if (!(this.date && this.date.length > 0)) {
          this.$message.warning('请选择单量统计申请时间')
          return
        }
        const query = {
          params: {
            applyType: 1,
            applyUser: this.query.applyUser,
            startTime: this.date[0],
            endTime: this.date[1]
          },
          currentPage,
          pageSize
        }
        const res = await fenceReserveApplyList(query)
        if (res && res.data) {
          this.tableData.data = res.data.rows
          this.tableData.total = res.data.total
        }
      },
      async showDetail(row) {
        this.$refs.fenceDetail.open(row)
      },
      async del(row) {
        const res = await fenceReserveDelete({ id: row.id })
        if (res && res.data) {
          this.$message.success('操作成功！')
          this.updateData()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.radio-icon {
  font-size: 16px;
  color: #606266;
}
.attention {
  color: red;
}
.config-tip {
  margin-left: 10px;
  cursor: pointer;
}
.btns {
  margin-bottom: 10px;
}
</style>
